<template lang="pug">
    #app.layout-wrapper
        top-bar(v-if="showTopBar")
        .layout-body
            AsideLayout(v-if='showAside')
            keep-alive(v-if="isRouterAlive")
                router-view.router-view(v-if='$route.meta.keepAlive' :key="$route.fullPath")
            router-view.router-view(v-if='isRouterAlive && !$route.meta.keepAlive' :key="$route.fullPath")
</template>

<script>
import {mapMutations} from "vuex"
import TopBar from '@/components/topbar.vue'
import AsideLayout from "@/views/components/aside-layout"

export default {
    components: {
        TopBar,
        AsideLayout
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    computed: {
        showTopBar() {
            // 优先级高
            const sourceHeaderShow = !this.$store.state.global.topBarHide
            // 系统内部设置 优先级低
            const systemHeaderShow = this.$store.state.global.pageConfig.headerVisible
            return !sourceHeaderShow ? false : systemHeaderShow
        },
        showAside() {
            // 路由参数只要存在hideAside则隐藏侧边栏
            return this.$route.query.hideAside !== undefined || this.$store.state.global.asideHide ? false : this.$route.meta.showAside
        },
    },
    provide() {
        return {
            reload: this.reload,
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => {
                this.isRouterAlive = true
            })
        },
        ...mapMutations([
            'setSource',
            'setAsideHide',
            'setTopBarHide',
        ]),
    },
    mounted() {
        // 如果从其他平台嵌入 则禁用一些功能
        this.$router.onReady(() => {
            const source = this.$route.query.source !== undefined
            this.setSource(source)
            this.setAsideHide(source)
            this.setTopBarHide(source)
        })
    }
}
</script>

<style lang="scss">
.layout-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.layout-body {
    flex-grow: 1;
    overflow-y: auto;
    @include beautiful-scrollbar();

    & > div {
        min-height: 100%;
    }

    display: flex;
    flex-direction: row;
}

.router-view {
    flex-grow: 1;
    overflow-y: auto;
}
</style>
